<template>
	<nav>
		<ul class="topmainlist">
			<li>
				<router-link to="/main" exact>
					<div class="mainfile">
						<span>文件</span>
						</div>
				</router-link>				
			</li>
			<li><router-link to="1" exact>
					<div class="homepage">
						<span>首页</span>
						</div>
				</router-link></li>
			<li><router-link to="2" exact>
					<div class="treatment">
						<span>治疗</span>
						</div>
				</router-link></li>
			<li><router-link to="3" exact>
					<div class="service">
						<span>服务</span>
					</div>
				</router-link></li>
			<li><router-link to="4" exact>
					<div class="schedule">
						<span>排程</span>
					</div>
				</router-link></li>
			<li><router-link to="5" exact>
					<div class="patientmanagement">
						<span>患者管理</span>
					</div>
				</router-link></li>
				<li><router-link to="6" exact>
					<div class="datamanagement">
						<span>数据管理</span>
						</div>
				</router-link></li>
				<li><router-link to="7" exact>
					<div class="set">
						<span>设置</span>
					</div>
					</router-link></li>
				<li><router-link to="8" exact>
					<div class="help">
						<span>帮助</span>
						</div>
				</router-link></li>
		</ul>
	</nav>
</template>

<script>
	export default{
		name:'pageheader'
	}
</script>

<style>
	.topmainlist{	
		position: relative;
		z-index: 999;
		background-color: rgb(245,245,245);	
		width: 100%;
		list-style-type: none;
		float: left;
	}
	.topmainlist div{		
		display:flex;
		align-items:center;
		justify-content: center;
		height: 32px;
		white-space:nowrap;
	}
	.topmainlist li{
		display: inline-block;
		width: 7%;
	}
	a{	
		color: rgb(22,213,238);/*设置字体颜色*/
		text-decoration: none !important;/*消除下划线*/	
		display: block;
	}			
	/*选中则发生一些变化*/
	.router-link-active{
		background: rgb(22,213,238);
		color: #eee;
	}
	ol, ul, dl{
		margin-bottom:0 !important;
	}
	ol, ul{
		padding-left: 0 !important;
	}
</style>
